<script setup>
	import {
		largePay
	} from "@/api/system/dashboards";
	import {
		onMounted,
		getCurrentInstance,
		ref,
		reactive,
		toRefs
	} from "vue";
	const scrollContainer = ref(null);
	let intervalId = null;
	let tableData = ref([]);

	const getLargePay = async () => {
		const res = await largePay();
		tableData.value = res.data;
		tableData.value.forEach((item) => {
			switch (item.paymentOrderFlag) {
				case 1:
					item.paymentOrderName = "咨询协作";
					break;
				case 2:
					item.paymentOrderName = "业务招待";
					break;
				case 2:
					item.paymentOrderName = "通讯费";
					break;
				case 4:
					item.paymentOrderName = "市内交通";
					break;
				case 5:
					item.paymentOrderName = "差旅";
					break;
				case 6:
					item.paymentOrderName = "会议费";
					break;
				case 7:
					item.paymentOrderName = "固定资产采购";
					break;
				case 8:
					item.paymentOrderName = "房屋租赁";
					break;
				case 9:
					item.paymentOrderName = "通用付款";
					break;
				case 10:
					item.paymentOrderName = "专家费";
					break;
				case 11:
					item.paymentOrderName = "劳务费";
					break;
				case 12:
					item.paymentOrderName = "非员工交通住宿费";
					break;
			}
		});
	};
	const scroll = () => {
		const container = scrollContainer.value;
		container.scrollTop += 1;
		if (container.scrollHeight - container.scrollTop === container.clientHeight) {
			const newData = tableData.value.map((item) => ({
				...item,
				id: item.id + tableData.value.length,
			}));
			tableData.value = [...tableData.value, ...newData];
			container.scrollTop = container.scrollTop - container.clientHeight;
		}
	};

	onMounted(() => {
		intervalId = setInterval(scroll, 100); // 每50毫秒滚动一次
		getLargePay();
	});

	onUnmounted(() => {
		clearInterval(intervalId); // 清除定时器
	});
</script>

<template>
	<VCard class="myBox">
		<VCardText>
			<div class="Box">
				<VCardTitle>
					<div class="tableTitle">
						<p><span class="Titshu">&nbsp;</span>&nbsp;&nbsp;关注合作协议</p>
						<section></section>
					</div>
				</VCardTitle>
				<li class="typOne">
					<span>合作协议编号</span>
					<span>合同名称</span>
					<span>合作方名称</span>
					<span>经办部门</span>
					<span>经办日期</span>
					<span>当前状态</span>
					<span>经办人</span>
				</li>
				<div class="scroll-container" ref="scrollContainer">
					<ul>
						<li v-for="item in tableData" :key="item.id">
							<span>{{ item.paymentOrderName }}</span>
							<span>{{ item.serialNumber }}</span>
							<span>{{ item.agent }}</span>
							<span>{{ item.agentDept }}</span>
							<span>{{ item.paymentAmount }}</span>
							<span>{{ item.state === 1 ? "已结束" : "未结束" }}</span>
							<span>{{ item.paymentMethod }}</span>
						</li>
					</ul>
				</div>
			</div>
		</VCardText>
	</VCard>
</template>

<style lang="scss" scoped>
	.myBox {
		inline-size: 100%;
	}

	.tableTitle {
		display: flex;
		justify-content: space-between;

		>p {
			font-weight: 900;
			font-size: 20px;
			color: #000;
		}

		>section {
			font-size: 12px;
			color: #ccc;
		}
	}

	li {
		display: flex;
		align-items: center;
		block-size: 30px;
		font-size: 12px;

		>span {
			display: inline-block;
			overflow: hidden;
			inline-size: 20%;
			text-overflow: ellipsis;
			white-space: nowrap;
			text-align: center;
		}

		>span:nth-last-child(1) {
			// inline-size: 20%;
		}
	}

	.typOne {
		font-weight: 700;
		color: #000;
	}

	.scroll-container li {
		block-size: 25px;
		line-height: 25px;
	}

	ul li:nth-child(odd) {
		background-color: rgba(var(--v-theme-on-surface), var(--v-border-opacity));
	}

	ul li:hover {
		background-color: #e6f7ff;
	}

	.scroll-container {
		overflow: hidden;
		block-size: 260px;
	}

	.scroll-container ul {
		padding: 0;
		margin: 0;
		block-size: auto;
		list-style: none;
	}

	.Titshu {
		display: inline-block;
		background-color: blue;
		block-size: 28px;
		inline-size: 8px;
	}
</style>